<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美金充值</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/CSS.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../layui/layui.all.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/JS.js"></script>
</head>
<style type="text/css">
    #order_price input{
        width: 100%;
    }
    .order_price_num{
        border: none;
        border-bottom:1px solid #ccc; 
    }
    .order_price_btn{
    border: none;
    padding: 2% 0;
    background: #54cae8;
    color: #fff;
    border-radius: 16px;
    }
    #order_price li{
        padding: 3%;
    }
</style>
<body style="background: #fff">
<header>
    <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
    <div class="center title">美金充值</div>
</header>
<form action="">
<ul class="recharge clearfix">
    <li class="active">
        <p>500美金</p>
        <p>送50美金</p>
    </li>
    <li>
        <p>1000美金</p>
        <p>送100美金</p>
    </li>
    <li>
        <p>2000美金</p>
        <p>送200美金</p>
    </li>
    <li>
        <p>3000美金</p>
        <p>送300美金</p>
    </li>
    <li>
        <p>5000美金</p>
        <p>送500美金</p>
    </li>
    <li class="order_price" style="line-height: 45px">
        其他金额
    </li>
</ul>
<div class="recharge_btn"><input type="button" name="" value="确定"></div>
<div class="recharge_main">
    <ul class="confirm_recharge">
        <li>确认充值 <i class="close"></i></li>
        <li class="clearfix">
            <span class="fl">支付金额</span>
            <span class="fr recharge_price"></span>
        </li>
        <li class="clearfix">
            <span class="fl">
                <img src="../img/zfb.png" alt="">
                支付宝支付
            </span>
            <span class="fr"><input type="radio"  name="cPaytype" value="支付宝支付" checked></span>
        </li>
        <li><input type="button" class="go_apply" name="" value="去支付"></li>
    </ul>
</div>
<div id="order_price" style="display: none;">
    <ul>
        <li>
            <input class="order_price_num" type="" name="" placeholder="请填写金额">
        </li>
        <li><input type="button" value="确定" class="order_price_btn" name=""></li>
        <li class="order_price_text">送 <span></span> 美金</li>
    </ul>
</div>
<input type="hidden" class="bili" value="" name="">
</form>
</body>
</html>
<script>
$('.recharge li').click(function () {
   $(this).addClass('active').siblings().removeClass('active');
});
$('.recharge_btn').click(function () {
    var val=$('.recharge .active p:nth-child(1)').text();
    var price=val.substring(0,val.length-2);
    var uCount = localStorage.getItem("uCount");
    var cPaytype=$('input[name="cPaytype"]:checked').val();
    $('.recharge_main').show();
    $('.recharge_price').text("￥"+price);
});
$('.go_apply').click(function(){
    var val=$('.recharge_price').text();
    var price=val.substr(1);
    var subject='meiyou';
    window.location.href="http://192.168.0.18:8080/meiyou/alipayOrder?total_amount="+price+"&subject="+subject;

});

$.post('/meiyou/getChongZhiBiLi',function(data){
    var bili=parseFloat(data.extend.bili);
    console.log(bili);
    $('.bili').val(bili);
    $.each($('.recharge li'),function(){
        var val=$(this).find('p:nth-child(1)').text();
        var price=parseInt(val.substring(0,val.length-2))
        $(this).find('p:nth-child(2)').html("送"+bili*price+"美金")
    });

    $('.order_price_num').keyup(function(){
        var price2=parseInt($(this).val());
        $('.order_price_text span').text(bili*price2)
    });
})

$('.close').click(function () {
    $('.recharge_main').hide();
    $('.recharge_price').text('');
});
$('.order_price').click(function(){
        layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                title:'填写需要充值的金额',
                area: ['300px', '300px'], //宽高
                content:$('#order_price')
        })
    });
$('.order_price_btn').click(function(){
    var price=$('.order_price_num').val();
    var song=$('.order_price_text span').html();
    var p1="<p>"+price+"美金</p>"+"<p>送"+song+"美金</p>";
    $('.order_price').html(p1);
    $('.order_price').attr('style','line-height:normal');
    $('#order_price').attr('style','display:none');
    layer.closeAll();
});
</script>
